{% extends "base.html" %}

{% block content %}
<div class="bg-white rounded-lg shadow">
    <!-- 顶部操作栏 -->
    <div class="p-6 border-b border-gray-200">
        <div class="flex justify-between items-center">
            <div class="flex-1 max-w-sm">
                <div class="relative">
                    <input type="text" 
                           id="search"
                           class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500"
                           placeholder="搜索浏览器名称...">
                    <div class="absolute left-3 top-2.5">
                        <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 表格 -->
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead>
                <tr>
                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        序号
                    </th>
                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        浏览器ID
                    </th>
                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        分组
                    </th>
                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        窗口名称
                    </th>
                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        代理IP
                    </th>
                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        备注
                    </th>
                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        创建时间
                    </th>
                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        操作
                    </th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for browser in browsers %}
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">{{ browser.seq }}</td>
                    <td class="px-6 py-4 whitespace-nowrap">{{ browser.code }}</td>
                    <td class="px-6 py-4 whitespace-nowrap">{{ browser.groupId }}</td>
                    <td class="px-6 py-4 whitespace-nowrap">{{ browser.name }}</td>
                    <td class="px-6 py-4 whitespace-nowrap">{{ browser.proxyIp or '-' }}</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        {{ browser.remark or '-' }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        {{ browser.createTime or '-' }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <button onclick="openBrowser('{{ browser.id }}')"
                                class="text-blue-600 hover:text-blue-900">
                            打开浏览器
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<script>
// 打开浏览器
async function openBrowser(browserId) {
    try {
        const response = await fetch(`/browsers/api/open/${browserId}`);
        if (!response.ok) {
            throw new Error('打开浏览器失败');
        }
        // TODO: 添加成功提示
    } catch (error) {
        console.error('Error:', error);
        alert('打开浏览器失败');
    }
}

// 搜索功能
document.getElementById('search').addEventListener('input', function(e) {
    const searchText = e.target.value.toLowerCase();
    const rows = document.querySelectorAll('tbody tr');
    
    rows.forEach(row => {
        const name = row.querySelector('td:nth-child(4)').textContent.toLowerCase();
        row.style.display = name.includes(searchText) ? '' : 'none';
    });
});
</script>
{% endblock %} 